<template>
  <div class="publicN kwNav clearfix">
    <h1 class="publicLogo kwLogo fl">
      <a href="#"><img :src="logoImg"></a>
    </h1>
    <div class="fr">
      <ul class="fl publicNav clearfix">
        <li v-for="(item,i) in homeNavList" @click="navClick($event,item.routine,i)" :class="[(i==curIndex)?'cur':'',item.routine]">
          <a @click="goAnchor(item.routine)">
            <h3>{{item.title}}</h3>
            <p>{{item.titleEn}}</p>
          </a>
          <div class="trBox"></div>
        </li>
      </ul>
      <div class="wzdh fr" @mouseover="mouseOverAddClassFlag" @mouseout="mouseOutRemoveClassFlag">
        <p>网站导航</p>
        <ul>
          <li v-for="item in webNavList"><a target="_blank" :href="item.url">{{item.title}}</a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'KwNav',
    methods:{
      //锚点跳转
      goAnchor:function(navFlag){
        //新闻类的列表页 锚点跳转
        if(navFlag == 'Xgbd'){
          setTimeout(function () {
            document.getElementById('publicNewsIdFlag').scrollIntoView(true);
          },10)
        }
        //视频类的列表页 锚点跳转
        if(navFlag == 'sphx'){
          setTimeout(function () {
            document.getElementById('publicVideoIdFlag').scrollIntoView(true);
          },10)
        }
        //图集类的列表页 锚点跳转
        if(navFlag == 'xsfc'){
          setTimeout(function () {
            document.getElementById('publicKwPicturesIdFlag').scrollIntoView(true);
          },10)
        }
        //合作机构的列表页 锚点跳转
        if(navFlag == 'Hzjg'){
          setTimeout(function () {
            document.getElementById('publicHzIdFlag').scrollIntoView(true);
          },10)
        }
      },
      //导航切换
      navClick(event,url,i){
        let _this = this;
        _this.curIndex = i;
        var curLi= $(event.currentTarget);
        curLi.addClass('cur').siblings().removeClass('cur');
        _this.$router.push({ path: url });
      },
      //鼠标经过 "网站导航" 增加 wdzhCur class属性
      mouseOverAddClassFlag:function () {
        $('.wzdh').addClass('wdzhCur');
      },
      //鼠标离开 "网站导航" 移除 wdzhCur class属性
      mouseOutRemoveClassFlag:function () {
        $('.wzdh').removeClass('wdzhCur');
      },
    },
    mounted(){
      //判断当前处于哪个页面，对相应导航按钮做选中状态
      var currentUrl = window.location.href;
      //首页
      if(currentUrl.indexOf('home') > 0){
        //首页
        $('.home').addClass('cur');
        $('.Xgbd').removeClass('cur');
        $('.xsfc').removeClass('cur');
        $('.sphx').removeClass('cur');
        $('.Hzjg').removeClass('cur');
      }else if(currentUrl.indexOf('Xgbd') > 0){
        //新闻中心
        $('.Xgbd').addClass('cur');
        $('.home').removeClass('cur');
        $('.xsfc').removeClass('cur');
        $('.sphx').removeClass('cur');
        $('.Hzjg').removeClass('cur');
      }else if(currentUrl.indexOf('xsfc') > 0 || currentUrl.indexOf('pictureDetail') > 0){
        //选手风采
        $('.xsfc').addClass('cur');
        $('.home').removeClass('cur');
        $('.Xgbd').removeClass('cur');
        $('.sphx').removeClass('cur');
        $('.Hzjg').removeClass('cur');
      }else if(currentUrl.indexOf('sphx') > 0 || currentUrl.indexOf('videoDetail') > 0){
        //视频花絮
        $('.sphx').addClass('cur');
        $('.home').removeClass('cur');
        $('.Xgbd').removeClass('cur');
        $('.xsfc').removeClass('cur');
        $('.Hzjg').removeClass('cur');
      }else if(currentUrl.indexOf('Hzjg') > 0){
        //赞助商
        $('.Hzjg').addClass('cur');
        $('.home').removeClass('cur');
        $('.Xgbd').removeClass('cur');
        $('.xsfc').removeClass('cur');
        $('.sphx').removeClass('cur');
      }
    },
    //数据
    data() {
      return {
        logoImg: 'static/images/kwLogo.png',
        curIndex: 0,
        //世界小姐官网导航数据初始化
        homeNavList: [
          {
            "title": "首页",
            "titleEn": "HOME",
            "routine": "home"
          },
          {
            "title": "新闻中心",
            "titleEn": "NEWS",
            "routine": "Xgbd"
          },
          {
            "title": "选手风采",
            "titleEn": "PHOTO",
            "routine": "xsfc"
          },
          {
            "title": "视频花絮",
            "titleEn": "VIDEO",
            "routine": "sphx"
          },
          {
            "title": "赞助商",
            "titleEn": "SPONSOR",
            "routine": "Hzjg"
          }
        ],
        //右侧公共部分-网站导航
        webNavList: [
          {
            "url": "http://m.nsr.com.cn/testMw/",
            "title": "世界小姐"
          },
          {
            "url": "",
            "title": "中模赛事"
          },
          {
            "url": "",
            "title": "少儿国际模特"
          },
          {
            "url": "http://47.96.102.150/",
            "title": "kids world"
          }
        ]
      }
    }
  }
</script>

<style>

</style>
